<template>
  <div class="transfer-con">
    <g-banner title="穿梭框" des="穿梭框页面适用于数据在两个容器之间穿梭"></g-banner>
    <a-affix :target="getScrollingCon">
      <div class="g-title-con">
        <h2 class="g-main-title">穿梭框</h2>
      </div>
    </a-affix>
    <div class="g-box">
      <el-transfer filterable :filter-method="filterMethod" :props="{key: 'account', label: 'userName' }"
        filter-placeholder="请输入城市拼音" v-model="value" :data="transferList" class="transfer">
        <div slot-scope="{ option }" class="table-tr">
          <span>{{option.userName}}</span>
          <span>{{option.account}}</span>
        </div>
      </el-transfer>
    </div>
  </div>
</template>
<script>
import { getScrollingCon } from '@/util/common'
export default {
  data() {
    return {
      value: ['DEMO1', 'LDAP测试'],
      transferList: [
        { account: 'DEMO1', userName: 'demo1' },
        { account: 'LDAP测试', userName: 'ldap' },
        { account: 'MICIO', userName: 'micio' },
        { account: 'SHIYUAN', userName: '石原' },
        { account: 'SHIYUAN2', userName: '石原2' },
        { account: 'TEST123', userName: '奥数大师' },
        { account: 'CHENM', userName: '陈萌' },
        { account: 'FANGAIYIN', userName: '房爱印' },
      ]
    }
  },
  methods: {
    getScrollingCon,
    filterMethod(value, item) {
      if(value === '') {
        return item
      }
      if(item.userName.indexOf(value) != -1) {
        return item
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.transfer {
  margin: auto;
}
/deep/ .el-transfer-panel {
  width: 300px;
}
/deep/ .el-transfer-panel__item.el-checkbox {
  width: 100%;
}
.table-tr {
  width: 100%;
  span {
    display: inline-block;
    width: 50%;
  }
}
</style>